<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from "vue";
// 引入echarts的baidu地图扩展
import "echarts/extension/bmap/bmap.js";
import { getMapData } from "@/api/index.js";

const option = ref({});

const renderChart = (scatterData, effectScatterData, styleJson) => {
  option.value = {
    // 使用baidu地图做为底图
    bmap: {
      key: "WRPDpUT50zDtgwlnux6dpaL0eSwerIOb", // 申请的baidu地图ak
      center: [108.954355, 34.346721], // 地图中心点坐标
      zoom: 5, // 地图的缩放级别(默认值5)
      roam: true, // 是否开启鼠标缩放和平移漫游
      // 自定义地图样式
      mapStyle: {
        styleJson: styleJson,
      },
    },
    title: {
      text: "饿了么网点地图",
      left: "center",
    },
    // 全局的提示框组件
    tooltip: {},
    series: [
      // 普通的散点图
      {
        type: "scatter",
        name: "饿了么外卖",
        // 对于地图类型的data格式: [{name: '北京', value: [经度, 纬度, 销售额]}]
        coordinateSystem: "bmap", // 指定使用百度地图做为坐标系
        data: scatterData,
        encode: {
          value: 2, // 指定第三个维度为值
        },
        // 自定义散点的大小, 销售额 / 100
        symbolSize(value) {
          return value[2] / 10;
        },
      },
      // 带动效(涟漪效果)的散点图
      {
        type: "effectScatter",
        name: "新中地外卖TOP10",
        coordinateSystem: "bmap",
        data: effectScatterData,
        encode: {
          value: 2, // 指定第三个维度为值
        },
        // 自定义散点的大小, 销售额 / 100
        symbolSize(value) {
          return value[2] / 10;
        },
        // 设置涟漪效果
        rippleEffect: {
          brushType: "stroke",
          color: "purple",
        },
        // 设置局部的提示框的样式
        tooltip: {
          formatter(params) {
            return `${params.name}<br/>销售额: ${params.value[2]}`;
          },
          textStyle: {
            color: "green",
          },
        },
        itemStyle: {
          color: "#5270D4",
        },
      },
    ],
  };
};
function converData(obj) {
  const res = [];
  const { city, geodata } = obj;
  city.forEach((item) => {
    const geo = geodata[item.name];
    if (geo) {
      res.push({
        name: item.name,
        value: [...geo, item.value],
      });
    }
  });
  return res;
}
onMounted(async () => {
  const res = await getMapData();
  // import函数导入一个module(模块), 返回Module对象
  const styleJson = await import("./mapStyle.json");
  // console.log(styleJson)
  // console.log(res)
  // console.log(converData(res))
  const scatterData = converData(res);
  // 按照销售额从大到小的排序
  const effectScatterData = scatterData
    .sort((a, b) => b.value[2] - a.value[2])
    .slice(0, 10);

  renderChart(scatterData, effectScatterData, styleJson.default);
});
</script>

<style scoped></style>
